<template>
	<view class="box">
		<view class="sticky">
			<view :style="{height: navheight}"></view>
			<view class="topnav" :style="{height: topheight}">
				<view class="home" @tap="home()">
					<van-icon name="wap-home-o" />
				</view>

				<view class="searchbox">
					<view class="inp">
						<view class="i_box">
							<view class="i_box">
								<view class="i1">
									<van-icon name="search" />
								</view>
								<view class="text">
									<text>搜索</text>
								</view>
							</view>
						</view>
					</view>
				</view>




			</view>

			<view class="location">
				<view class="tip1">
					<text>泉州经贸职业技术学院</text>
					<view class="location_i">
						<van-icon name="arrow" />
					</view>
				</view>

				<view class="distance">
					<view class="distance_i">
						<van-icon name="location-o" />
					</view>
					<view class="distance_p">
						距离您76m {{state}}
					</view>

					<view class="tip2">
						<view class="tip2_i">
							<van-icon name="comment-circle" />
						</view>
						<view class="tip2_p">
							<view class="p">
								非会员单笔买满十杯,送一杯,详情请见订购须知。
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="sticky1">
		
		</view>
		
		
		<view class="select">
			<scroll-view class="left_menu" :scroll-y="true">
				<scroll-view :scroll-y="true" class="select_left" scroll-into-view="">
					<view class="left_menu" v-for="(val,index) in leftmenu" :key="val.id" @click="leftmenuhandle(val.id,)"
						:id="val.id==num ? 'line' : ''">
						<view class="imgbox">
							<image :src="val.url" mode="" class="img"></image>
						</view>
						<view :class="val.id==num ? 'tipbox1' : 'tipbox'">
							{{val.tip}}
						</view>
					</view>
				
				</scroll-view>
			</scroll-view>
		</view>
		
		
		
		
		
	</view>
</template>
<script>
	export default {
	
		data() {
			return {
				navheight: '',
				topheight: '',
				rightmenuid: 'goods1',
				num: 0,
				leftdata: [],
				leftmenu: [{
					id: 1,
					url: 'https://go.cdn.heytea.com/storage/category/2020/04/23/3b52e3d18fae4290b0a668a776b21645.jpg'
				}],

				right: []


			}
		},
		methods: {
			home() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			leftmenuhandle(e) {
				this.num = e
				this.rightmenuid = 'goods' + e
				
			},

			rightmove(e) {



			},
			lefthandle(e){
				this.$store.state.popustatus = !(this.$store.state.popustatus)
				this.$bus.$emit('test',e)
			}


		},
		mounted() {
			this.navheight = wx.getMenuButtonBoundingClientRect().top + 'px'
			this.topheight = (wx.getMenuButtonBoundingClientRect().height + 10) + 'px'


			this.getdb().collection('icon').get()
				.then((data) => {
					this.leftmenu = data.data
				})
				
			this.getdb().collection('commodity').get()
			.then((data) =>{
			   this.leftdata = data.data
			})
			
			
			
			


		},
		computed: {
			state(){
				return this.$store.state.popustatus
			}
		},
		onReady: function() {

		},

		onPageScroll(e) {
			console.log(123)
		},

	}
</script>

<style scoped>
	.box {
		width: 100%;
		height: 100%;
		
	}
	.sticky {
		width: 100%;
		height: 400rpx;
		position: fixed;
		background-color: #FFFFFF;
		z-index: 99;
	}

	.sticky1 {
		width: 100%;
		height: 400rpx;
	}

	.topnav {
		width: 100%;
		position: relative;
	}

	.topnav .home {
		font-size: 1.5rem;
		position: absolute;
		left: 20rpx;
	}

	.topnav .searchbox {
		height: 32px;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.topnav .inp {
		width: 350rpx;
		height: 100%;
		background-color: #f3f3f3;
		border-radius: 50rpx;
		position: relative;
	}

	.topnav .inp .i_box {
		width: 50%;
		height: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.topnav .i_box .i1 {
		height: 100%;
		float: left;
		font-size: 1.35rem;
		margin-top: 5rpx;
	}

	.topnav .i_box .text {
		height: 100%;
		float: left;
		position: relative;
	}

	.i_box .text text {
		width: 100rpx;
		display: block;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
</style>

<style scoped>
	.location {
		width: 100%;
		height: 200rpx;
		background-color: #FFFFFF;
	}

	.location .tip1 {
		width: 100%;
		height: 50rpx;
		background-color: #FFFFFF;
	}

	.location text {
		line-height: 50rpx;
		display: inline-block;
		font-size: 1.1rem;
		font-weight: 700;
		margin-left: 20rpx;
	}

	.location .location_i {
		line-height: 50rpx;
		display: inline-block;
	}

	.distance .distance_i {
		display: inline-block;
		margin: 20rpx;
		color: #9b9b9b;
	}

	.distance .distance_p {
		display: inline-block;
		font-size: 0.8rem;
		color: #9b9b9b;
	}

	.tip2 {
		width: 100%;
		height: 40rpx;

	}

	.tip2 .tip2_i {
		line-height: 40rpx;
		float: left;
		font-size: 1.1rem;
		color: #F0AD4E;
		margin-left: 20rpx;
	}

	.tip2 .tip2_p {
		height: 40rpx;
		float: left;

	}

	.tip2 .tip2_p .p {
		line-height: 40rpx;
		font-size: 0.8rem;
		color: #9b9b9b;
		margin-left: 30rpx;
	}
</style>


<style scoped>
	.select{
		width: 100%;
		height: 75%;
		background-color: #007AFF;
	}
	.left_menu{
		width: 100%;
		height: 100%;
	}
	
</style>


